<template>
  <!--业务员专栏首页-->
  <div class="curriculum">
    <div class="curr_back">
      <!-- <div class="btn">
        <div class="curr_rush">
          <img src="../../../static/image/logo.png" />
        </div>
        <span>税东家(国际)税务商学院</span>
      </div> -->
      <img
        src="http://wechatapppro-1252524126.file.myqcloud.com/appbf5Md8yM9487/image/kdzoq3bh0a3wssjwjy08.png"
      />
    </div>
    <div class="Valueaddedtax_box">
      <!-- 大专栏部分 -->
      <div class="Valueaddedtax_txt">
        <span> 税东家商学院系列课程 </span>
        <span></span>
        <!-- <span @click="more(item)">查看更多</span> -->
      </div>
      <div class="Valueaddedtax">
        <div
          class="Valueaddedtax_txt1"
          @click="BigvalueTxt(item.pid)"
          v-for="(item, index) in big"
          :key="index"
        >
          <div class="Valueaddedtax_img">
            <img :src="item.imgUrl" />
            <span class="bigspecial">大专栏</span>
          </div>
          <div class="Valueaddedtax_cend">
            <div class="title">{{ item.title }}</div>
            <p class="brief">{{ item.summary }}</p>
            <div class="bottom">
              <div class="subscr" v-if="item.isBuy == 1">
                <img src="../../../static/image/subscription.png" />
                已订阅
              </div>
              <div class="subscr" v-if="item.isBuy == 0">
                <img src="../../../static/image/lock.png" />
                未订阅
              </div>
              <span class="price">￥{{ item.price / 100 }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 社区部分 -->
      <div class="community">
        <div class="Valueaddedtax_txt">
          <span> 税东家社区 </span>
          <span></span>
        </div>
        <ul>
          <li>
            <img
              src="http://wechatapppro-1252524126.file.myqcloud.com/appbf5Md8yM9487/image/Y29tbXVuaXR5T3BlcmF0ZS1tYW5hZ2VDb21tdW5pdHktMTIwMDA4MjI.jpg"
              alt=""
            />
            <span>问题交流</span>
            <button
              @click="
                Enter(
                  'https://appbf5md8ym9487.h5.xiaoeknow.com/content_page/eyJ0eXBlIjoyLCJhcHBfaWQiOiJhcHBiZjVNZDh5TTk0ODciLCJyZXNvdXJjZV90eXBlIjo3LCJwcm9kdWN0X2lkIjoicF81YWM4YjMwYTcxZTA0X0ZYV2o5OHFYIiwiY2hhbm5lbF9pZCI6IiIsInJlc291cmNlX2lkIjoiY181ZWJiYTFmYjExNjMyX0hmcXZuYUd6NTE4NCJ9'
                )
              "
            >
              进入
            </button>
          </li>
          <li>
            <img
              src="http://wechatapppro-1252524126.file.myqcloud.com/appbf5Md8yM9487/image/compress/160160Y29tbXVuaXR5T3BlcmF0ZS1tYW5hZ2VDb21tdW5pdHktNzc5NDYwMTE.jpg"
              alt=""
            />
            <span>企业社区</span>
            <button
              @click="
                Enter(
                  'https://appbf5md8ym9487.h5.xiaoeknow.com/content_page/eyJ0eXBlIjoyLCJhcHBfaWQiOiJhcHBiZjVNZDh5TTk0ODciLCJyZXNvdXJjZV90eXBlIjo3LCJwcm9kdWN0X2lkIjoicF81YWM4YjMwYTcxZTA0X0ZYV2o5OHFYIiwiY2hhbm5lbF9pZCI6IiIsInJlc291cmNlX2lkIjoiY181ZWJhMjk5ZWQ1ZWU3X1hUcllqNmdPMjYxMCJ9'
                )
              "
            >
              加入
            </button>
          </li>
        </ul>
      </div>
      <!-- 专栏部分 -->
      <div class="Valueaddedtax_txt">
        <span>最新资讯</span>
        <!-- <span @click="more(item)">查看更多</span> -->
        <span></span>
      </div>
      <div class="Valueaddedtax">
        <div
          class="Valueaddedtax_txt1"
          @click="valueTxt(item.columnId)"
          v-for="(item, index) in news"
          :key="index"
        >
          <div class="Valueaddedtax_img">
            <img :src="item.imgUrl" />
            <span class="bigspecial">专栏</span>
          </div>
          <div class="Valueaddedtax_cend">
            <div class="title">{{ item.name }}</div>
            <p class="brief">{{ item.content }}</p>
            <div class="small_bottom">
              <span class="dredge">{{ item.buyNum }}人开通</span>
              <div class="subscr" v-if="item.isBuy == 1">
                <img src="../../../static/image/subscription.png" />
                已订阅
              </div>
              <div class="subscr" v-if="item.isBuy == 0">
                <img src="../../../static/image/lock.png" />
                未订阅
              </div>
              <span class="price">￥{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <Footers></Footers>
    </footer>
  </div>
</template>
<script>
import Footers from "./footer";
import { Columnindex } from "../../api/api";
import querystring from "query-string";
import { Indicator, Toast } from "mint-ui";

export default {
  name: "Sahomepage",
  components: {
    Footers,
  },
  data() {
    return {
      big: [],
      news: [],
    };
  },
  methods: {
    //专栏列表
    columnResult() {
      Indicator.open("加载中...");
      var params = {};
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      Columnindex(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.big = res.data.data.big;
          this.news = res.data.data.news;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    goout() {
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
    //跳转更多专栏
    more(item) {
      this.$router.push({
        path: "/Salesman/more",
        query: { id: item.id, name: item.name },
      });
    },
    //专栏详情
    valueTxt(columnId) {
      this.$router.push({
        path: "/Salesman/catalog",
        query: { columnId: columnId },
      });
    },
    //大专栏详情
    BigvalueTxt(pid) {
      this.$router.push({
        path: "/Salesman/bigcolumn",
        query: { pid: pid },
      });
    },
    //进入问题交流
    Enter(e) {
      window.location.href = e;
    },
  },
  mounted() {
    this.columnResult();
  },
};
</script>
<style lang="scss" scoped>
.curriculum {
  width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}
.curr_back {
  width: 100%;
  height: 2.5rem;
  position: relative;
}
.curr_back img {
  width: 100%;
  height: 100%;
}
.btn {
  position: absolute;
  top: 0.8rem;
  left: 0.3rem;
  width: 7rem;
  height: 0.96rem;
  border-radius: 0.2rem;
  display: flex;
  line-height: 0.96rem;
  font-size: 0.3rem;
  box-sizing: border-box;
  padding: 0 0.2rem 0 0.2rem;
}
.curr_rush {
  margin-top: 0.05rem;
}
.btn span {
  font-size: 0.4rem;
  color: #fff;
  margin-left: 0.22rem;
}
.curr_rush img {
  width: 0.84rem;
  height: 0.84rem;
}
.Valueaddedtax {
  width: 7rem;
  height: auto;
  margin: auto;
}
.Valueaddedtax_txt {
  display: flex;
  justify-content: space-between;
  height: 0.78rem;
  line-height: 0.78rem;
  border: 0.02rem solid #eeeeee;
  span:nth-child(1) {
    margin-left: 0.3rem;
    color: #000;
    font-size: 0.3rem;
    font-weight: 700;
  }
  span:nth-child(2) {
    margin-right: 0.3rem;
    font-size: 0.24rem;
    color: #333333;
  }
}
.Valueaddedtax_txt:nth-of-type(1) {
  border-bottom: 0.02rem solid #eeeeee;
}
.Valueaddedtax_txt1 {
  display: flex;
  justify-content: space-between;
  height: 2.21rem;
  border-bottom: 0.02rem solid #eeeeee;
}
.Valueaddedtax_txt1:nth-last-child(1) {
  border: none;
}
.Valueaddedtax_img {
  width: 2rem;
  height: 1.8rem;
  margin: auto;
  margin-left: 0.1rem;
  position: relative;
  img {
    width: 2rem;
    height: 1.8rem;
  }
  span {
    position: absolute;
    padding: 0 0.12rem;
    bottom: 0.1rem;
    right: 0.1rem;
    color: #fff;
    opacity: 0.6;
    line-height: 0.32rem;
    font-size: 0.18rem;
    white-space: nowrap;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 0.04rem;
    height: 0.32rem;
  }
}

.Valueaddedtax_cend {
  width: 4.45rem;
  font-size: 0.3rem;
  padding: 0.26rem;
  .title {
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
  }
  .brief {
    font-size: 0.28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
    color: #999;
    margin-top: 0.15rem;
  }
  .bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
    font-size: 0.25rem;
    .price {
      color: #f82e18;
    }
  }
  .small_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.25rem;
    .dredge {
      color: #ccc;
      font-size: 0.25rem;
    }
    .price {
      color: #f82e18;
    }
  }
}
.subscr {
  height: 0.35rem;
  display: flex;
  align-items: center;
  font-size: 0.26rem;
  color: #333333;
}
.subscr img {
  width: 0.25rem;
  height: 0.35rem;
  margin-right: 0.1rem;
}

.back {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.back_tu {
  width: 6rem;
  height: 9.6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.back .bc {
  width: 5.48rem;
  height: 6.91rem;
  display: block;
}
.back_bottom {
  width: 5.97rem;
  height: 2rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0px 0px 0.32rem 0.32rem;
}
.back_title {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  margin-top: 0.39rem;
}
.back_title img:nth-child(1) {
  width: 0.58rem;
  height: 0.58rem;
}
.back_title img:nth-child(2) {
  width: 1.95rem;
  height: 0.31rem;
  margin-left: 0.11rem;
}
.back_bottom span {
  font-size: 0.24rem;
  font-family: Microsoft YaHei;
  color: #131010;
  margin-top: 0.23rem;
  font-weight: 400;
}
.back_bottom .liji {
  margin-top: 0.31rem;
  width: 5rem;
  height: 0.82rem;
  border: 0.02rem solid #f4d824;
  border-radius: 0.4rem;
  text-align: center;
  line-height: 0.82rem;
  font-size: 0.3rem;
  color: #f4d824;
  position: relative;
}
.community {
  width: 100%;
  height: auto;
  border-top: 0.1rem solid #eeeeee;
  border-bottom: 0.1rem solid #eeeeee;
  ul {
    width: 100%;
    height: auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    li {
      width: 90%;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 50%;
      }
      span {
        display: inline-block;
        width: 50%;
        font-size: 0.3rem;
        color: #4a4c5b;
        font-weight: 500;
      }
      button {
        width: 1.3rem;
        height: 0.6rem;
        border: 0.01rem solid #fad200;
        color: #fad200;
        font-size: 0.24rem;
        background: #ffffff;
        border-radius: 0.3rem;
      }
    }
  }
}
</style>